{include file="common/header-top" /}


<style>
    .user-name{
        font-size: 15px;
        font-weight: 600;
    }
    .van-circle__text{
        font-size: 18px !important;
    }
</style>


<div id='app' v-cloak>

    <van-nav-bar title="钱包中心-支付" left-arrow @click-left="goBack" left-text="返回" > </van-nav-bar>


    <van-cell
        title="充值单号"
        icon="/__FRONT__/images/icon/order-sn.png"
        style="font-weight: bold;font-size: 16px; margin-top: 20px;"
        :value="chargeInfo.order_no"
    ></van-cell>
    <van-cell
        title="充值金额"
        icon="/__FRONT__/images/icon/money-icon.png"
        style="font-weight: bold;font-size: 16px;"
        :value="chargeInfo.money"
    ></van-cell>


    <van-row style="margin-top: 20px;">
        <van-col span="24">
            <van-grid :column-num="1" icon-size="100px">
                <van-grid-item
                        icon="/__FRONT__/images/icon/bean-g.png"
                        :text="showExchangeBeanText"
                        :info="totalExchangeBean"
                ></van-grid-item>
            </van-grid>
        </van-col>
    </van-row>

    <van-row style="margin-top: 15px;">
        <van-col span="24" style="text-align: center">
            <van-button
                type="primary"
                size="large"
                @click="payBtn"
            >支付</van-button>
        </van-col>
    </van-row>







</div>


<script src="/__FRONT__/plugs/wechatJsSDK/jweixin-1.4.0.js"></script>
<script>

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                currentRate: 0,
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                chargeId: '{$chargeId}',
                chargeInfo: {},

                payGetBrandWCPayRequest: {},

            };
        },

        created(){

            var postData = {
                chargeId: this.chargeId
            };
            axiosRequest.post('/api/user/wechatPayInfo', postData).then(function (response) {
                if (response.code == 200) {
                    vm.$data.chargeInfo = response.data.chargeInfo;
                    vm.$data.payGetBrandWCPayRequest =response.data.jsApiParams;
                } else {
                    vant.Toast('支付参数错误!', function () {
                        window.location.href = '/index/Userwallet/beanRecord?type=1'
                    });
                }
            });


        },

        computed:{
            totalExchangeBean(){
                return  this.chargeInfo.bean;
            },
            showExchangeBeanText(){
                return '可兑换 ' + this.chargeInfo.bean + ' 个汇豆';
            }
        },

        methods: {
            //返回上一页
            goBack() {
                history.back();
            },

            //调起微信jsapi 支付
            onBridgeReady(){
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    vm.$data.payGetBrandWCPayRequest,
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            vant.Toast({
                                message: '支付成功!',
                                onClose(){
                                    window.location.href = '/index/Userwallet/beanRecord?type=1';
                                }
                            });
                        } else {
                            vant.Toast('支付失败,请稍后再试!');
                        }
                    });
            },

            //支付按钮
            payBtn(){
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady);
                    }
                }else{
                    this.onBridgeReady();
                }
            },
        }
    });




</script>







{include file="common/foot-bottom" /}





